import React, { Component } from 'react';
import styled from 'styled-components/native';
import { FlatList } from 'react-native';

import SearchView from '../../components/messages/SearchView';
import NotificationItem from './NotificationItem';

import { list } from '../../../test/NotificationMocker';

const Root = styled.View`
  width: 100%;
  height: 100%;
`;

class NotificationListView extends Component {

  _renderItem = ({ item, index }) => <NotificationItem {...item} isLast={index === list.data.length - 1} />

  render() {
    return (
      <Root>
        <FlatList
          data={list.data}
          renderItem={this._renderItem}
          ListHeaderComponent={<SearchView />}
          keyExtractor={item => item._id}
        />
      </Root>
    );
  }
}

export default NotificationListView;
